<template>
  <el-descriptions :column="1" border>
    <el-descriptions-item label="题目ID">{{ question.questionId || '--' }}</el-descriptions-item>
    <el-descriptions-item label="标题">{{ question.questionTitle || '--' }}</el-descriptions-item>
    <el-descriptions-item label="题干">
      <div v-html="question.questionText || '--'"></div>
    </el-descriptions-item>
    <el-descriptions-item label="题型">
      <dict-tag :options="dict.type.bis_question_type" :value="question.questionType"/>
    </el-descriptions-item>
    <el-descriptions-item label="难度">
      <dict-tag :options="dict.type.bis_question_difficulty" :value="question.difficulty"/>
    </el-descriptions-item>
    <el-descriptions-item label="分类">{{ question.categoryName || '--' }}</el-descriptions-item>
    <el-descriptions-item label="知识点">{{ question.pointName || '--' }}</el-descriptions-item>
    <el-descriptions-item label="创建者">{{ question.createName || '--' }}</el-descriptions-item>
    <el-descriptions-item label="创建时间">
      {{ parseTime(question.createTime, '{y}-{m}-{d}') || '--' }}
    </el-descriptions-item>

    <!-- 根据题型显示不同内容 -->
    <template v-if="question.questionType === '1' || question.questionType === '2'">
      <el-descriptions-item label="选项">
        <div v-for="(item, index) in (question.options ? JSON.parse(question.options).items : [])"
             :key="index" class="option-item">
          {{ item.value }}. {{ item.label }}
          <span
            v-if="question.questionType === '1' && question.correctAnswer === item.value"
            style="color: #67C23A"
          >
            (正确答案)
          </span>
          <span
            v-if="question.questionType === '2' && question.correctAnswer && question.correctAnswer.includes(item.value)"
            style="color: #67C23A"
          >
            (正确答案)
          </span>
        </div>
      </el-descriptions-item>
    </template>

    <template v-else-if="question.questionType === '3'">
      <el-descriptions-item label="填空答案">
        <div v-for="(item, index) in (question.options ? JSON.parse(question.options).items : [])"
             :key="index" class="option-item">
          填空{{ index + 1 }}: {{ item.label || '--' }}
        </div>
      </el-descriptions-item>
    </template>

    <template v-else-if="question.questionType === '4'">
      <el-descriptions-item label="正确答案">
        {{ question.correctAnswer === '1' ? '正确' : '错误' }}
      </el-descriptions-item>
    </template>

    <template v-else-if="question.questionType === '5'">
      <el-descriptions-item label="答案">
        <div v-html="question.correctAnswer || '--'"></div>
      </el-descriptions-item>

      <el-descriptions-item label="附件" v-if="question.fileIds">
        <file-list :file-ids="question.fileIds" />
      </el-descriptions-item>
    </template>
  </el-descriptions>
</template>

<script>
import FileList from './QuestionInput.vue';

export default {
  name: "QuestionDetail",
  components: { FileList },
  props: {
    question: {
      type: Object,
      required: true
    }
  },
  dicts: ['bis_question_type', 'bis_question_difficulty'],
  data() {
    return {
      parsedOptions: null
    };
  },
  created() {
    this.parseOptions();
  },
  methods: {
    parseOptions() {
      if (this.question.options) {
        try {
          this.parsedOptions = typeof this.question.options === 'string'
            ? JSON.parse(this.question.options)
            : this.question.options;
        } catch (e) {
          console.error('解析options出错:', e);
          this.parsedOptions = null;
        }
      }
    }
  }
};
</script>

<style scoped>
.option-item {
  margin-bottom: 8px;
  line-height: 1.5;
}
</style>
